<template>
    <div :class="visible?'QA-on':'QA-off'" class="QA-card el-font">
        <div class="relative-wrapper">
            <i class="el-icon-caret-top upDraw-btn"
               style="z-index: 5"
               @click="closeQA"></i>
        </div>
        <div class="QA-header">
            智能问答服务
        </div>
        <div id="QA-body"
             class="QA-body">
            <div v-for="(mes,index) in dialogList"
                 :key="index"
                 class="dialog-item">
                <div class="fill-item relative-wrapper">
                    <div :class="mes.pc?'pc-dialog-avatar':'npc-dialog-avatar'"
                         class="thin-darkgrey-border">
                        <el-image class="dialog-img"
                                  :src="mes.pc?userAvatar:require(`../../../public/img/demo.png`)"
                                  fit="fill"
                        ></el-image>
                    </div>
                    <div class="QA-message-wrapper" :class="mes.pc?'pc-message':'npc-message'">
                        <div class="QA-message thin-grey-border relative-wrapper">
                            <div class="left-tg" v-if="!mes.pc">
                                <div class="left-gap-tg"></div>
                            </div>
                            {{mes.message}}
                            <div class="right-tg" v-if="mes.pc">
                                <div class="right-gap-tg"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="QA-tail relative-wrapper">
            <i class="el-icon-chat-dot-round QA-pre-icon"></i>
            <input class="QA-input" type="text" @keydown="inquiry" v-model="questionText"/>
            <i class="el-icon-circle-close QA-suf-icon" @click="clearInput"></i>
        </div>
        <div class="relative-wrapper">
            <div class="bookmark" @click="closeQA">
                <div class="bookmark-gap-tg"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapActions} from "vuex";

    const dialog = [
        {
            pc: false,
            message: "这里是智能问答小助手~有什么可以帮到你的吗？"
        }
    ];

    export default {
        name: "QABlock",
        data() {
            return {
                questionText: "",
                dialogList: dialog,
                userAvatar: ""
            };
        },
        mounted() {
            this.getUserInfo(this.$cookies.get("userId")).then(res => {
                this.userAvatar = res.data.avatar;
            });
        },
        props: {
            // 使用从父组件传来的属性值visible
            visible: {
                type: Boolean,
                default: true
            }
        },
        methods: {
            ...mapActions([
                "getUserInfo",
                "getAnswer"
            ]),
            inquiry(event) {
                if (event.keyCode === 13) {
                    const mes = {
                        pc: true,
                        message: this.questionText.toString()
                    };
                    this.dialogList.push(mes);
                    this.questionText = "";
                    this.rollToBottom();
                    this.getAnswer(mes).then((result) => {
                        const res = {
                            pc: false,
                            message: result.answer
                        };
                        this.dialogList.push(res);
                        this.rollToBottom();
                    });

                }
            },
            rollToBottom() {
                let block = document.getElementById("QA-body");
                setTimeout(() => {
                    block.scrollTop = block.scrollHeight;
                }, 50);
            },
            clearInput() {
                this.questionText = "";
            },
            closeQA() {
                this.$emit("close");
            }
        }
    };
</script>

<style scoped>
    @import "../../assets/styles/transition.css";
    @import "../../assets/styles/homePage.css";
    @import "../../assets/styles/QA.css";
</style>